<!--  @author:ymy  -->
<template>
  <div class="home">
    <div class="top-img">
      <img src="https://assets-cdn.lanqb.com/popupv3/2022/dtd2022_1214_m.png" alt="" />
    </div>
    <Carrousel :bannerImg="bannerImg" />
    <div class="submenu">
      <div class="menu-item">
        <a href="">
          <span>
            <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu01.png" alt="" />
          </span>
          <span>免费1教程</span>
        </a>
      </div>
      <div class="menu-item">
        <a href="">
          <span>
            <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu04.png" alt="" />
          </span>
          <span>教程兑换</span>
        </a>
      </div>
      <div class="menu-item">
        <a href="">
          <span>
            <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu15.png" alt="" />
          </span>
          <span>大咖快报</span>
        </a>
      </div>
      <div class="menu-item">
        <a href="">
          <span>
            <img src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/h-submenu21.png" alt="" />
          </span>
          <span>品牌实况</span>
        </a>
      </div>
    </div>
    <Live :live="live" />
    <Teach :series="series" />
    <Graphic :graphic="graphic" />
    <div class="img-item">
      <img
        src="https://ss.lanqb.com/o_1du1bilcc1lbabhutuu1vitjj06f.jpg?imageView2/1/w/710/h/168"
        alt=""
      />
    </div>
    <Suggest :news="news" />
    <div class="home-footer">
      <a href="" class="about">关于蓝铅笔</a>
      <div class="footer1">
        <a href="">
          <img src="https://assets-cdn.lanqb.com/image/footer/footer-icon1_124x47.png" alt="" />
        </a>
        <a href="">
          <img src="https://assets-cdn.lanqb.com/image/footer/footer-icon5@2x.png" alt="" />
        </a>
        <a href="">
          <img src="https://assets-cdn.lanqb.com/image/footer/footer-icon2@2x.png" alt="" />
        </a>
        <a href="">
          <img src="https://assets-cdn.lanqb.com/image/footer/footer-icon3@2x.png" alt="" />
        </a>
      </div>
      <div class="footer2">
        <span>Copyright © 2020杭州多技教育科技有限公司</span>
        <a href="">浙ICP备11056181号</a>
      </div>
      <div class="footer3">
        <a href="">浙公网安备33010602000717号</a>
      </div>
    </div>
  </div>
</template>

<script>
import Carrousel from '@/components/Carrousel';
import Live from './Live';
import Teach from './Teach';
import Graphic from './Graphic';
import Suggest from './Suggest';
export default {
  name: 'Home',
  data() {
    return {
      bannerImg: [],
      live: [],
      series: [],
      graphic: [],
      news: [],
    };
  },
  components: {
    Carrousel,
    Live,
    Teach,
    Graphic,
    Suggest,
  },
  async created() {
    const { data } = await this.axiosRq(
      '/lqb/api/home/banner?type=m&local_code=10&limit=6&order=weight',
      'GET'
    );
    const { live } = await this.axiosRq(
      '/lqb/api/daniu?link=paging&live=3&is_live=1&limit=3&page=1',
      'GET'
    );
    const series = await this.axiosRq('/lqb/api/home/series', 'GET');
    const graphic = await this.axiosRq('/lqb/api/home/graphic-tutorials', 'GET');
    const news = await this.axiosRq('/lqb/api/home/news', 'GET');
    series.pop();
    series.pop();
    graphic.pop();
    graphic.pop();
    graphic.pop();
    this.news = news;
    this.graphic = graphic;
    this.series = series;
    this.live = live;
    this.bannerImg = data;
  },
};
</script>

<style lang="less" scoped>
.home {
  margin-top: 0.44rem;
  font-size: 0.2rem;
  background-color: #f4f4f4;
  margin-bottom: 0.5rem;
  > .top-img {
    height: 0.4rem;
    img {
      width: 100vw;
      height: 0.4rem;
    }
  }
  > .swiper-container {
    height: 1.3rem;
  }
  > .submenu {
    width: 100vw;
    height: 0.74rem;
    background-color: white;
    display: flex;
    justify-content: space-around;
    padding: 0.17rem 0 0.1rem 0;
    > .menu-item {
      > a {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 0.12rem;
        img {
          width: 0.48rem;
          height: 0.48rem;
        }
      }
    }
  }
  > .img-item {
    height: 0.84rem;
    padding: 0.1rem;
    margin-top: 0.1rem;
    background-color: white;
    img {
      width: 3.55rem;
      height: 0.84rem;
    }
  }
  > .home-footer {
    height: 0.89rem;
    text-align: center;
    margin: 0.175rem 0;
    > .about {
      text-align: center;
      font-size: 0.12rem;
      padding: 0rem 0.1rem;
      border-left: 0.01rem solid black;
      border-right: 0.01rem solid black;
    }
    > .footer1 {
      img {
        width: 0.515rem;
        height: 0.195rem;
        margin-left: 0.2rem;
      }
    }
    > .footer2 {
      font-size: 0.12rem;
      color: #a4a4a4;
      span {
        margin-right: 0.1rem;
      }
      a {
        color: #a4a4a4;
      }
    }

    > .footer3 {
      font-size: 0.12rem;
      a {
        color: #a4a4a4;
      }
    }
  }
}
</style>
